<template>
  <div class="box">
    <div class="overlay" v-show="showOverlay">
      <p class="overlay-text">正在绘制图片，请稍候...</p>
    </div>
    <div ref="vantaRef" class="vanta-container"></div>
    <div class="banner">
      <h1>Ai绘图</h1>
      <p>请输入图片样式<el-input type="text" v-model="question" /></p>
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          选择风格: {{ selectedStyle }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="style in styles" :key="style" :command="style">{{ style }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-button @click="Image">确定</el-button>
    </div>
    <div class="image-display">
      <img v-if="phytoImage" :src="phytoImage" alt="Phyto" class="phyto-image" />
    </div>
  </div>
</template>


<script>
import * as THREE from 'three'
import Net from 'vanta/src/vanta.net'

export default {
  data() {
    return {
      showOverlay: false,
      question: '',
      selectedStyle: '',
      styles: ['探索无限', '古风', '二次元', '写实风格', '浮世绘', '未来主义', '像素风格', '概念艺术', '赛博朋克', '巴洛克风格'],
      phytoImage: '',
    };
  },
  methods: {
    handleCommand(style) {
      this.selectedStyle = style;
    },
    Image() {
      this.showOverlay = true;
      this.$axios.post('http://localhost:8888/PostAi/AiImage', {
        url: 'https://luckycola.com.cn/aiImg/getAiImage',
        imgTxt: this.question,
        style: this.selectedStyle,
        ratio: '1:1',
      })
      .then(response => {
        console.log(response.data);
        this.phytoImage = response.data.data.result.img;
        this.showOverlay = false;

        this.$message({
          message: '绘图成功',
          type: 'success'
        });
      })
      .catch(error => {
        console.error(error);
      });
    }
  },
  mounted() {
    this.vantaEffect = Net({
      el: this.$refs.vantaRef,
      THREE: THREE,
    });
    VANTA.NET({
      el: this.$refs.vantaRef,
      mouseControls: true,
  touchControls: true,
  gyroControls: false,
  minHeight: 200.00,
  minWidth: 200.00,
  scale: 1.00,
  scaleMobile: 1.00
    });
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy();
    }
  },
};
</script>

<style lang="less" scoped>
.my_title{
  z-index: 999;
  position: fixed;
  top: 40%;
  left: 10%;
  color: aquamarine;
  font-size: 100px;
  font-weight: bolder;
}
.box {
  position: relative;
  display: flex;
  .banner {
    z-index: 999;
    position: absolute;
    top: 30%;
    left: 10%;
    color: #fff;
  }
  .image-display {
    position: absolute;
    top: 30%;
    right: 10%;
    width: 350px;
    height: auto;
    z-index: 999;
  }
}
.vanta-container {
  width: 100%;
  height: 600px;
}
h1 {
  font-size: 66px;
}
p {
  margin-top: 60px;
  font-size: 18px;
}
.phyto-image {
  width: 100%;
  height: auto;
  margin-top: 20px;
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.overlay::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin-top: -25px;
  margin-left: -25px;
  border: 4px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.overlay-text {
  color: #fff;
  font-size: 20px;
  text-align: center;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>